<!doctype html><html lang="en">
 <head>
  <meta content="text/html; charset=utf-8" http-equiv="Content-Type">
  <title>AV1 Still Image File Format (AVIF)</title>
  <meta content="width=device-width, initial-scale=1, shrink-to-fit=no" name="viewport">
<style data-fill-with="stylesheet">/******************************************************************************
 *                   Style sheet for the W3C specifications                   *
 *
 * Special classes handled by this style sheet include:
 *
 * Indices
 *   - .toc for the Table of Contents (<ol class="toc">)
 *     + <span class="secno"> for the section numbers
 *   - #toc for the Table of Contents (<nav id="toc">)
 *   - ul.index for Indices (<a href="#ref">term</a><span>, in §N.M</span>)
 *   - table.index for Index Tables (e.g. for properties or elements)
 *
 * Structural Markup
 *   - table.data for general data tables
 *     -> use 'scope' attribute, <colgroup>, <thead>, and <tbody> for best results !
 *     -> use <table class='complex data'> for extra-complex tables
 *     -> use <td class='long'> for paragraph-length cell content
 *     -> use <td class='pre'> when manual line breaks/indentation would help readability
 *   - dl.switch for switch statements
 *   - ol.algorithm for algorithms (helps to visualize nesting)
 *   - .figure and .caption (HTML4) and figure and figcaption (HTML5)
 *     -> .sidefigure for right-floated figures
 *   - ins/del
 *
 * Code
 *   - pre and code
 *
 * Special Sections
 *   - .note       for informative notes             (div, p, span, aside, details)
 *   - .example    for informative examples          (div, p, pre, span)
 *   - .issue      for issues                        (div, p, span)
 *   - .assertion  for assertions                    (div, p, span)
 *   - .advisement for loud normative statements     (div, p, strong)
 *   - .annoying-warning for spec obsoletion notices (div, aside, details)
 *
 * Definition Boxes
 *   - pre.def   for WebIDL definitions
 *   - table.def for tables that define other entities (e.g. CSS properties)
 *   - dl.def    for definition lists that define other entitles (e.g. HTML elements)
 *
 * Numbering
 *   - .secno for section numbers in .toc and headings (<span class='secno'>3.2</span>)
 *   - .marker for source-inserted example/figure/issue numbers (<span class='marker'>Issue 4</span>)
 *   - ::before styled for CSS-generated issue/example/figure numbers:
 *     -> Documents wishing to use this only need to add
 *        figcaption::before,
 *        .caption::before { content: "Figure "  counter(figure) " ";  }
 *        .example::before { content: "Example " counter(example) " "; }
 *        .issue::before   { content: "Issue "   counter(issue) " ";   }
 *
 * Header Stuff (ignore, just don't conflict with these classes)
 *   - .head for the header
 *   - .copyright for the copyright
 *
 * Miscellaneous
 *   - .overlarge for things that should be as wide as possible, even if
 *     that overflows the body text area. This can be used on an item or
 *     on its container, depending on the effect desired.
 *     Note that this styling basically doesn't help at all when printing,
 *     since A4 paper isn't much wider than the max-width here.
 *     It's better to design things to fit into a narrower measure if possible.
 *   - js-added ToC jump links (see fixup.js)
 *
 ******************************************************************************/

/******************************************************************************/
/*                                   Body                                     */
/******************************************************************************/

	body {
		counter-reset: example figure issue;

		/* Layout */
		max-width: 50em;               /* limit line length to 50em for readability   */
		margin: 0 auto;                /* center text within page                     */
		padding: 1.6em 1.5em 2em 50px; /* assume 16px font size for downlevel clients */
		padding: 1.6em 1.5em 2em calc(26px + 1.5em); /* leave space for status flag     */

		/* Typography */
		line-height: 1.5;
		font-family: sans-serif;
		widows: 2;
		orphans: 2;
		word-wrap: break-word;
		overflow-wrap: break-word;
		hyphens: auto;

		/* Colors */
		color: black;
		background: white top left fixed no-repeat;
		background-size: 25px auto;
	}


/******************************************************************************/
/*                         Front Matter & Navigation                          */
/******************************************************************************/

/** Header ********************************************************************/

	div.head { margin-bottom: 1em }
	div.head hr { border-style: solid; }

	div.head h1 {
		font-weight: bold;
		margin: 0 0 .1em;
		font-size: 220%;
	}

	div.head h2 { margin-bottom: 1.5em;}

/** W3C Logo ******************************************************************/

	.head .logo {
		float: right;
		margin: 0.4rem 0 0.2rem .4rem;
	}

	.head img[src*="logos/W3C"] {
		display: block;
		border: solid #1a5e9a;
		border-width: .65rem .7rem .6rem;
		border-radius: .4rem;
		background: #1a5e9a;
		color: white;
		font-weight: bold;
	}

	.head a:hover > img[src*="logos/W3C"],
	.head a:focus > img[src*="logos/W3C"] {
		opacity: .8;
	}

	.head a:active > img[src*="logos/W3C"] {
		background: #c00;
		border-color: #c00;
	}

	/* see also additional rules in Link Styling section */

/** Copyright *****************************************************************/

	p.copyright,
	p.copyright small { font-size: small }

/** Back to Top / ToC Toggle **************************************************/

	@media print {
		#toc-nav {
			display: none;
		}
	}
	@media not print {
		#toc-nav {
			position: fixed;
			z-index: 2;
			bottom: 0; left: 0;
			margin: 0;
			min-width: 1.33em;
			border-top-right-radius: 2rem;
			box-shadow: 0 0 2px;
			font-size: 1.5em;
			color: black;
		}
		#toc-nav > a {
			display: block;
			white-space: nowrap;

			height: 1.33em;
			padding: .1em 0.3em;
			margin: 0;

			background: white;
			box-shadow: 0 0 2px;
			border: none;
			border-top-right-radius: 1.33em;
			background: white;
		}
		#toc-nav > #toc-jump {
			padding-bottom: 2em;
			margin-bottom: -1.9em;
		}

		#toc-nav > a:hover,
		#toc-nav > a:focus {
			background: #f8f8f8;
		}
		#toc-nav > a:not(:hover):not(:focus) {
			color: #707070;
		}

		/* statusbar gets in the way on keyboard focus; remove once browsers fix */
		#toc-nav > a[href="#toc"]:not(:hover):focus:last-child {
			padding-bottom: 1.5rem;
		}

		#toc-nav:not(:hover) > a:not(:focus) > span + span {
			/* Ideally this uses :focus-within on #toc-nav */
			display: none;
		}
		#toc-nav > a > span + span {
			padding-right: 0.2em;
		}

		#toc-toggle-inline {
			vertical-align: 0.05em;
			font-size: 80%;
			color: gray;
			color: hsla(203,20%,40%,.7);
			border-style: none;
			background: transparent;
			position: relative;
		}
		#toc-toggle-inline:hover:not(:active),
		#toc-toggle-inline:focus:not(:active) {
			text-shadow: 1px 1px silver;
			top: -1px;
			left: -1px;
		}

		#toc-nav :active {
			color: #C00;
		}
	}

/** ToC Sidebar ***************************************************************/

	/* Floating sidebar */
	@media screen {
		body.toc-sidebar #toc {
			position: fixed;
			top: 0; bottom: 0;
			left: 0;
			width: 23.5em;
			max-width: 80%;
			max-width: calc(100% - 2em - 26px);
			overflow: auto;
			padding: 0 1em;
			padding-left: 42px;
			padding-left: calc(1em + 26px);
			background: inherit;
			background-color: #f7f8f9;
			z-index: 1;
			box-shadow: -.1em 0 .25em rgba(0,0,0,.1) inset;
		}
		body.toc-sidebar #toc h2 {
			margin-top: .8rem;
			font-variant: small-caps;
			font-variant: all-small-caps;
			text-transform: lowercase;
			font-weight: bold;
			color: gray;
			color: hsla(203,20%,40%,.7);
		}
		body.toc-sidebar #toc-jump:not(:focus) {
			width: 0;
			height: 0;
			padding: 0;
			position: absolute;
			overflow: hidden;
		}
	}
	/* Hide main scroller when only the ToC is visible anyway */
	@media screen and (max-width: 28em) {
		body.toc-sidebar {
			overflow: hidden;
		}
	}

	/* Sidebar with its own space */
	@media screen and (min-width: 78em) {
		body:not(.toc-inline) #toc {
			position: fixed;
			top: 0; bottom: 0;
			left: 0;
			width: 23.5em;
			overflow: auto;
			padding: 0 1em;
			padding-left: 42px;
			padding-left: calc(1em + 26px);
			background: inherit;
			background-color: #f7f8f9;
			z-index: 1;
			box-shadow: -.1em 0 .25em rgba(0,0,0,.1) inset;
		}
		body:not(.toc-inline) #toc h2 {
			margin-top: .8rem;
			font-variant: small-caps;
			font-variant: all-small-caps;
			text-transform: lowercase;
			font-weight: bold;
			color: gray;
			color: hsla(203,20%,40%,.7);
		}

		body:not(.toc-inline) {
			padding-left: 29em;
		}
		/* See also Overflow section at the bottom */

		body:not(.toc-inline) #toc-jump:not(:focus) {
			width: 0;
			height: 0;
			padding: 0;
			position: absolute;
			overflow: hidden;
		}
	}
	@media screen and (min-width: 90em) {
		body:not(.toc-inline) {
			margin: 0 4em;
		}
	}

/******************************************************************************/
/*                                Sectioning                                  */
/******************************************************************************/

/** Headings ******************************************************************/

	h1, h2, h3, h4, h5, h6, dt {
		page-break-after: avoid;
		page-break-inside: avoid;
		font: 100% sans-serif;   /* Reset all font styling to clear out UA styles */
		font-family: inherit;    /* Inherit the font family. */
		line-height: 1.2;        /* Keep wrapped headings compact */
		hyphens: manual;         /* Hyphenated headings look weird */
	}

	h2, h3, h4, h5, h6 {
		margin-top: 3rem;
	}

	h1, h2, h3 {
		color: #005A9C;
		background: transparent;
	}

	h1 { font-size: 170%; }
	h2 { font-size: 140%; }
	h3 { font-size: 120%; }
	h4 { font-weight: bold; }
	h5 { font-style: italic; }
	h6 { font-variant: small-caps; }
	dt { font-weight: bold; }

/** Subheadings ***************************************************************/

	h1 + h2,
	#subtitle {
		/* #subtitle is a subtitle in an H2 under the H1 */
		margin-top: 0;
	}
	h2 + h3,
	h3 + h4,
	h4 + h5,
	h5 + h6 {
		margin-top: 1.2em; /* = 1 x line-height */
	}

/** Section divider ***********************************************************/

	:not(.head) > hr {
		font-size: 1.5em;
		text-align: center;
		margin: 1em auto;
		height: auto;
		border: transparent solid 0;
		background: transparent;
	}
	:not(.head) > hr::before {
		content: "\2727\2003\2003\2727\2003\2003\2727";
	}

/******************************************************************************/
/*                            Paragraphs and Lists                            */
/******************************************************************************/

	p {
		margin: 1em 0;
	}

	dd > p:first-child,
	li > p:first-child {
		margin-top: 0;
	}

	ul, ol {
		margin-left: 0;
		padding-left: 2em;
	}

	li {
		margin: 0.25em 0 0.5em;
		padding: 0;
	}

	dl dd {
		margin: 0 0 .5em 2em;
	}

	.head dd + dd { /* compact for header */
		margin-top: -.5em;
	}

	/* Style for algorithms */
	ol.algorithm ol:not(.algorithm),
	.algorithm > ol ol:not(.algorithm) {
	 border-left: 0.5em solid #DEF;
	}

	/* Put nice boxes around each algorithm. */
	[data-algorithm]:not(.heading) {
	  padding: .5em;
	  border: thin solid #ddd; border-radius: .5em;
	  margin: .5em calc(-0.5em - 1px);
	}
	[data-algorithm]:not(.heading) > :first-child {
	  margin-top: 0;
	}
	[data-algorithm]:not(.heading) > :last-child {
	  margin-bottom: 0;
	}

	/* Style for switch/case <dl>s */
	dl.switch > dd > ol.only,
	dl.switch > dd > .only > ol {
	 margin-left: 0;
	}
	dl.switch > dd > ol.algorithm,
	dl.switch > dd > .algorithm > ol {
	 margin-left: -2em;
	}
	dl.switch {
	 padding-left: 2em;
	}
	dl.switch > dt {
	 text-indent: -1.5em;
	 margin-top: 1em;
	}
	dl.switch > dt + dt {
	 margin-top: 0;
	}
	dl.switch > dt::before {
	 content: '\21AA';
	 padding: 0 0.5em 0 0;
	 display: inline-block;
	 width: 1em;
	 text-align: right;
	 line-height: 0.5em;
	}

/** Terminology Markup ********************************************************/


/******************************************************************************/
/*                                 Inline Markup                              */
/******************************************************************************/

/** Terminology Markup ********************************************************/
	dfn   { /* Defining instance */
		font-weight: bolder;
	}
	a > i { /* Instance of term */
		font-style: normal;
	}
	dt dfn code, code.idl {
		font-size: medium;
	}
	dfn var {
		font-style: normal;
	}

/** Change Marking ************************************************************/

	del { color: red;  text-decoration: line-through; }
	ins { color: #080; text-decoration: underline;    }

/** Miscellaneous improvements to inline formatting ***************************/

	sup {
		vertical-align: super;
		font-size: 80%
	}

/******************************************************************************/
/*                                    Code                                    */
/******************************************************************************/

/** General monospace/pre rules ***********************************************/

	pre, code, samp {
		font-family: Menlo, Consolas, "DejaVu Sans Mono", Monaco, monospace;
		font-size: .9em;
		page-break-inside: avoid;
		hyphens: none;
		text-transform: none;
	}
	pre code,
	code code {
		font-size: 100%;
	}

	pre {
		margin-top: 1em;
		margin-bottom: 1em;
		overflow: auto;
	}

/** Inline Code fragments *****************************************************/

  /* Do something nice. */

/******************************************************************************/
/*                                    Links                                   */
/******************************************************************************/

/** General Hyperlinks ********************************************************/

	/* We hyperlink a lot, so make it less intrusive */
	a[href] {
		color: #034575;
		text-decoration: none;
		border-bottom: 1px solid #707070;
		/* Need a bit of extending for it to look okay */
		padding: 0 1px 0;
		margin: 0 -1px 0;
	}
	a:visited {
		border-bottom-color: #BBB;
	}

	/* Use distinguishing colors when user is interacting with the link */
	a[href]:focus,
	a[href]:hover {
		background: #f8f8f8;
		background: rgba(75%, 75%, 75%, .25);
		border-bottom-width: 3px;
		margin-bottom: -2px;
	}
	a[href]:active {
		color: #C00;
		border-color: #C00;
	}

	/* Backout above styling for W3C logo */
	.head .logo,
	.head .logo a {
		border: none;
		text-decoration: none;
		background: transparent;
	}

/******************************************************************************/
/*                                    Images                                  */
/******************************************************************************/

	img {
		border-style: none;
	}

	/* For autogen numbers, add
	   .caption::before, figcaption::before { content: "Figure " counter(figure) ". "; }
	*/

	figure, .figure, .sidefigure {
		page-break-inside: avoid;
		text-align: center;
		margin: 2.5em 0;
	}
	.figure img,    .sidefigure img,    figure img,
	.figure object, .sidefigure object, figure object {
		max-width: 100%;
		margin: auto;
	}
	.figure pre, .sidefigure pre, figure pre {
		text-align: left;
		display: table;
		margin: 1em auto;
	}
	.figure table, figure table {
		margin: auto;
	}
	@media screen and (min-width: 20em) {
		.sidefigure {
			float: right;
			width: 50%;
			margin: 0 0 0.5em 0.5em
		}
	}
	.caption, figcaption, caption {
		font-style: italic;
		font-size: 90%;
	}
	.caption::before, figcaption::before, figcaption > .marker {
		font-weight: bold;
	}
	.caption, figcaption {
		counter-increment: figure;
	}

	/* DL list is indented 2em, but figure inside it is not */
	dd > .figure, dd > figure { margin-left: -2em }

/******************************************************************************/
/*                             Colored Boxes                                  */
/******************************************************************************/

	.issue, .note, .example, .assertion, .advisement, blockquote {
		padding: .5em;
		border: .5em;
		border-left-style: solid;
		page-break-inside: avoid;
	}
	span.issue, span.note {
		padding: .1em .5em .15em;
		border-right-style: solid;
	}

	.issue,
	.note,
	.example,
	.advisement,
	.assertion,
	blockquote {
		margin: 1em auto;
	}
	.note  > p:first-child,
	.issue > p:first-child,
	blockquote > :first-child {
		margin-top: 0;
	}
	blockquote > :last-child {
		margin-bottom: 0;
	}

/** Blockquotes ***************************************************************/

	blockquote {
		border-color: silver;
	}

/** Open issue ****************************************************************/

	.issue {
		border-color: #E05252;
		background: #FBE9E9;
		counter-increment: issue;
		overflow: auto;
	}
	.issue::before, .issue > .marker {
		text-transform: uppercase;
		color: #AE1E1E;
		padding-right: 1em;
		text-transform: uppercase;
	}
	/* Add .issue::before { content: "Issue " counter(issue) " "; } for autogen numbers,
	   or use class="marker" to mark up the issue number in source. */

/** Example *******************************************************************/

	.example {
		border-color: #E0CB52;
		background: #FCFAEE;
		counter-increment: example;
		overflow: auto;
		clear: both;
	}
	.example::before, .example > .marker {
		text-transform: uppercase;
		color: #827017;
		min-width: 7.5em;
		display: block;
	}
	/* Add .example::before { content: "Example " counter(example) " "; } for autogen numbers,
	   or use class="marker" to mark up the example number in source. */

/** Non-normative Note ********************************************************/

	.note {
		border-color: #52E052;
		background: #E9FBE9;
		overflow: auto;
	}

	.note::before, .note > .marker,
	details.note > summary::before,
	details.note > summary > .marker {
		text-transform: uppercase;
		display: block;
		color: hsl(120, 70%, 30%);
	}
	/* Add .note::before { content: "Note"; } for autogen label,
	   or use class="marker" to mark up the label in source. */

	details.note > summary {
		display: block;
		color: hsl(120, 70%, 30%);
	}
	details.note[open] > summary {
		border-bottom: 1px silver solid;
	}

/** Assertion Box *************************************************************/
	/*  for assertions in algorithms */

	.assertion {
		border-color: #AAA;
		background: #EEE;
	}

/** Advisement Box ************************************************************/
	/*  for attention-grabbing normative statements */

	.advisement {
		border-color: orange;
		border-style: none solid;
		background: #FFEECC;
	}
	strong.advisement {
		display: block;
		text-align: center;
	}
	.advisement > .marker {
		color: #B35F00;
	}

/** Spec Obsoletion Notice ****************************************************/
	/* obnoxious obsoletion notice for older/abandoned specs. */

	details {
		display: block;
	}
	summary {
		font-weight: bolder;
	}

	.annoying-warning:not(details),
	details.annoying-warning:not([open]) > summary,
	details.annoying-warning[open] {
		background: #fdd;
		color: red;
		font-weight: bold;
		padding: .75em 1em;
		border: thick red;
		border-style: solid;
		border-radius: 1em;
	}
	.annoying-warning :last-child {
		margin-bottom: 0;
	}

@media not print {
	details.annoying-warning[open] {
		position: fixed;
		left: 1em;
		right: 1em;
		bottom: 1em;
		z-index: 1000;
	}
}

	details.annoying-warning:not([open]) > summary {
		text-align: center;
	}

/** Entity Definition Boxes ***************************************************/

	.def {
		padding: .5em 1em;
		background: #DEF;
		margin: 1.2em 0;
		border-left: 0.5em solid #8CCBF2;
	}

/******************************************************************************/
/*                                    Tables                                  */
/******************************************************************************/

	th, td {
		text-align: left;
		text-align: start;
	}

/** Property/Descriptor Definition Tables *************************************/

	table.def {
		/* inherits .def box styling, see above */
		width: 100%;
		border-spacing: 0;
	}

	table.def td,
	table.def th {
		padding: 0.5em;
		vertical-align: baseline;
		border-bottom: 1px solid #bbd7e9;
	}

	table.def > tbody > tr:last-child th,
	table.def > tbody > tr:last-child td {
		border-bottom: 0;
	}

	table.def th {
		font-style: italic;
		font-weight: normal;
		padding-left: 1em;
		width: 3em;
	}

	/* For when values are extra-complex and need formatting for readability */
	table td.pre {
		white-space: pre-wrap;
	}

	/* A footnote at the bottom of a def table */
	table.def           td.footnote {
		padding-top: 0.6em;
	}
	table.def           td.footnote::before {
		content: " ";
		display: block;
		height: 0.6em;
		width: 4em;
		border-top: thin solid;
	}

/** Data tables (and properly marked-up index tables) *************************/
	/*
		 <table class="data"> highlights structural relationships in a table
		 when correct markup is used (e.g. thead/tbody, th vs. td, scope attribute)

		 Use class="complex data" for particularly complicated tables --
		 (This will draw more lines: busier, but clearer.)

		 Use class="long" on table cells with paragraph-like contents
		 (This will adjust text alignment accordingly.)
		 Alternately use class="longlastcol" on tables, to have the last column assume "long".
	*/

	table {
		word-wrap: normal;
		overflow-wrap: normal;
		hyphens: manual;
	}

	table.data,
	table.index {
		margin: 1em auto;
		border-collapse: collapse;
		border: hidden;
		width: 100%;
	}
	table.data caption,
	table.index caption {
		max-width: 50em;
		margin: 0 auto 1em;
	}

	table.data td,  table.data th,
	table.index td, table.index th {
		padding: 0.5em 1em;
		border-width: 1px;
		border-color: silver;
		border-top-style: solid;
	}

	table.data thead td:empty {
		padding: 0;
		border: 0;
	}

	table.data  thead,
	table.index thead,
	table.data  tbody,
	table.index tbody {
		border-bottom: 2px solid;
	}

	table.data colgroup,
	table.index colgroup {
		border-left: 2px solid;
	}

	table.data  tbody th:first-child,
	table.index tbody th:first-child  {
		border-right: 2px solid;
		border-top: 1px solid silver;
		padding-right: 1em;
	}

	table.data th[colspan],
	table.data td[colspan] {
		text-align: center;
	}

	table.complex.data th,
	table.complex.data td {
		border: 1px solid silver;
		text-align: center;
	}

	table.data.longlastcol td:last-child,
	table.data td.long {
	 vertical-align: baseline;
	 text-align: left;
	}

	table.data img {
		vertical-align: middle;
	}


/*
Alternate table alignment rules

	table.data,
	table.index {
		text-align: center;
	}

	table.data  thead th[scope="row"],
	table.index thead th[scope="row"] {
		text-align: right;
	}

	table.data  tbody th:first-child,
	table.index tbody th:first-child  {
		text-align: right;
	}

Possible extra rowspan handling

	table.data  tbody th[rowspan]:not([rowspan='1']),
	table.index tbody th[rowspan]:not([rowspan='1']),
	table.data  tbody td[rowspan]:not([rowspan='1']),
	table.index tbody td[rowspan]:not([rowspan='1']) {
		border-left: 1px solid silver;
	}

	table.data  tbody th[rowspan]:first-child,
	table.index tbody th[rowspan]:first-child,
	table.data  tbody td[rowspan]:first-child,
	table.index tbody td[rowspan]:first-child{
		border-left: 0;
		border-right: 1px solid silver;
	}
*/

/******************************************************************************/
/*                                  Indices                                   */
/******************************************************************************/


/** Table of Contents *********************************************************/

	.toc a {
		/* More spacing; use padding to make it part of the click target. */
		padding-top: 0.1rem;
		/* Larger, more consistently-sized click target */
		display: block;
		/* Reverse color scheme */
		color: black;
		border-color: #3980B5;
		border-bottom-width: 3px !important;
		margin-bottom: 0px !important;
	}
	.toc a:visited {
		border-color: #054572;
	}
	.toc a:not(:focus):not(:hover) {
		/* Allow colors to cascade through from link styling */
		border-bottom-color: transparent;
	}

	.toc, .toc ol, .toc ul, .toc li {
		list-style: none; /* Numbers must be inlined into source */
		/* because generated content isn't search/selectable and markers can't do multilevel yet */
		margin:  0;
		padding: 0;
		line-height: 1.1rem; /* consistent spacing */
	}

	/* ToC not indented until third level, but font style & margins show hierarchy */
	.toc > li             { font-weight: bold;   }
	.toc > li li          { font-weight: normal; }
	.toc > li li li       { font-size:   95%;    }
	.toc > li li li li    { font-size:   90%;    }
	.toc > li li li li li { font-size:   85%;    }

	.toc > li             { margin: 1.5rem 0;    }
	.toc > li li          { margin: 0.3rem 0;    }
	.toc > li li li       { margin-left: 2rem;   }

	/* Section numbers in a column of their own */
	.toc .secno {
		float: left;
		width: 4rem;
		white-space: nowrap;
	}
	.toc > li li li li .secno {
		font-size: 85%;
	}
	.toc > li li li li li .secno {
		font-size: 100%;
	}

	:not(li) > .toc              { margin-left:  5rem; }
	.toc .secno                  { margin-left: -5rem; }
	.toc > li li li .secno       { margin-left: -7rem; }
	.toc > li li li li .secno    { margin-left: -9rem; }
	.toc > li li li li li .secno { margin-left: -11rem; }

	/* Tighten up indentation in narrow ToCs */
	@media (max-width: 30em) {
		:not(li) > .toc              { margin-left:  4rem; }
		.toc .secno                  { margin-left: -4rem; }
		.toc > li li li              { margin-left:  1rem; }
		.toc > li li li .secno       { margin-left: -5rem; }
		.toc > li li li li .secno    { margin-left: -6rem; }
		.toc > li li li li li .secno { margin-left: -7rem; }
	}
	@media screen and (min-width: 78em) {
		body:not(.toc-inline) :not(li) > .toc              { margin-left:  4rem; }
		body:not(.toc-inline) .toc .secno                  { margin-left: -4rem; }
		body:not(.toc-inline) .toc > li li li              { margin-left:  1rem; }
		body:not(.toc-inline) .toc > li li li .secno       { margin-left: -5rem; }
		body:not(.toc-inline) .toc > li li li li .secno    { margin-left: -6rem; }
		body:not(.toc-inline) .toc > li li li li li .secno { margin-left: -7rem; }
	}
	body.toc-sidebar #toc :not(li) > .toc              { margin-left:  4rem; }
	body.toc-sidebar #toc .toc .secno                  { margin-left: -4rem; }
	body.toc-sidebar #toc .toc > li li li              { margin-left:  1rem; }
	body.toc-sidebar #toc .toc > li li li .secno       { margin-left: -5rem; }
	body.toc-sidebar #toc .toc > li li li li .secno    { margin-left: -6rem; }
	body.toc-sidebar #toc .toc > li li li li li .secno { margin-left: -7rem; }

	.toc li {
		clear: both;
	}


/** Index *********************************************************************/

	/* Index Lists: Layout */
	ul.index       { margin-left: 0; columns: 15em; text-indent: 1em hanging; }
	ul.index li    { margin-left: 0; list-style: none; break-inside: avoid; }
	ul.index li li { margin-left: 1em }
	ul.index dl    { margin-top: 0; }
	ul.index dt    { margin: .2em 0 .2em 20px;}
	ul.index dd    { margin: .2em 0 .2em 40px;}
	/* Index Lists: Typography */
	ul.index ul,
	ul.index dl { font-size: smaller; }
	@media not print {
		ul.index li span {
			white-space: nowrap;
			color: transparent; }
		ul.index li a:hover + span,
		ul.index li a:focus + span {
			color: #707070;
		}
	}

/** Index Tables *****************************************************/
	/* See also the data table styling section, which this effectively subclasses */

	table.index {
		font-size: small;
		border-collapse: collapse;
		border-spacing: 0;
		text-align: left;
		margin: 1em 0;
	}

	table.index td,
	table.index th {
		padding: 0.4em;
	}

	table.index tr:hover td:not([rowspan]),
	table.index tr:hover th:not([rowspan]) {
		background: #f7f8f9;
	}

	/* The link in the first column in the property table (formerly a TD) */
	table.index th:first-child a {
		font-weight: bold;
	}

/******************************************************************************/
/*                                    Print                                   */
/******************************************************************************/

	@media print {
		/* Pages have their own margins. */
		html {
			margin: 0;
		}
		/* Serif for print. */
		body {
			font-family: serif;
		}
	}
	@page {
		margin: 1.5cm 1.1cm;
	}

/******************************************************************************/
/*                                    Legacy                                  */
/******************************************************************************/

	/* This rule is inherited from past style sheets. No idea what it's for. */
	.hide { display: none }



/******************************************************************************/
/*                             Overflow Control                               */
/******************************************************************************/

	.figure .caption, .sidefigure .caption, figcaption {
		/* in case figure is overlarge, limit caption to 50em */
		max-width: 50rem;
		margin-left: auto;
		margin-right: auto;
	}
	.overlarge > table {
		/* limit preferred width of table */
		max-width: 50em;
		margin-left: auto;
		margin-right: auto;
	}

	@media (min-width: 55em) {
		.overlarge {
			margin-left: calc(13px + 26.5rem - 50vw);
			margin-right: calc(13px + 26.5rem - 50vw);
			max-width: none;
		}
	}
	@media screen and (min-width: 78em) {
		body:not(.toc-inline) .overlarge {
			/* 30.5em body padding 50em content area */
			margin-left: calc(40em - 50vw) !important;
			margin-right: calc(40em - 50vw) !important;
		}
	}
	@media screen and (min-width: 90em) {
		body:not(.toc-inline) .overlarge {
			/* 4em html margin 30.5em body padding 50em content area */
			margin-left: 0 !important;
			margin-right: calc(84.5em - 100vw) !important;
		}
	}

	@media not print {
		.overlarge {
			overflow-x: auto;
			/* See Lea Verou's explanation background-attachment:
			 * http://lea.verou.me/2012/04/background-attachment-local/
			 *
			background: top left  / 4em 100% linear-gradient(to right,  #ffffff, rgba(255, 255, 255, 0)) local,
			            top right / 4em 100% linear-gradient(to left, #ffffff, rgba(255, 255, 255, 0)) local,
			            top left  / 1em 100% linear-gradient(to right,  #c3c3c5, rgba(195, 195, 197, 0)) scroll,
			            top right / 1em 100% linear-gradient(to left, #c3c3c5, rgba(195, 195, 197, 0)) scroll,
			            white;
			background-repeat: no-repeat;
			*/
		}
	}
</style>
  <meta content="Bikeshed version 1760a0346ebf3096d8d47b818b15ffcad41e99a0" name="generator">
  <link href="https://AOMediaCodec.github.io/av1-avif" rel="canonical">
  <meta content="0f78319190395b66d3a427ef718bdb69cf96a73d" name="document-revision">
<style>/* style-md-lists */

/* This is a weird hack for me not yet following the commonmark spec
   regarding paragraph and lists. */
[data-md] > :first-child {
    margin-top: 0;
}
[data-md] > :last-child {
    margin-bottom: 0;
}</style>
<style>/* style-counters */

body {
    counter-reset: example figure issue;
}
.issue {
    counter-increment: issue;
}
.issue:not(.no-marker)::before {
    content: "Issue " counter(issue);
}

.example {
    counter-increment: example;
}
.example:not(.no-marker)::before {
    content: "Example " counter(example);
}
.invalid.example:not(.no-marker)::before,
.illegal.example:not(.no-marker)::before {
    content: "Invalid Example" counter(example);
}

figcaption {
    counter-increment: figure;
}
figcaption:not(.no-marker)::before {
    content: "Figure " counter(figure) " ";
}</style>
<style>/* style-dfn-panel */

        .dfn-panel {
            position: absolute;
            z-index: 35;
            height: auto;
            width: -webkit-fit-content;
            width: fit-content;
            max-width: 300px;
            max-height: 500px;
            overflow: auto;
            padding: 0.5em 0.75em;
            font: small Helvetica Neue, sans-serif, Droid Sans Fallback;
            background: #DDDDDD;
            color: black;
            border: outset 0.2em;
        }
        .dfn-panel:not(.on) { display: none; }
        .dfn-panel * { margin: 0; padding: 0; text-indent: 0; }
        .dfn-panel > b { display: block; }
        .dfn-panel a { color: black; }
        .dfn-panel a:not(:hover) { text-decoration: none !important; border-bottom: none !important; }
        .dfn-panel > b + b { margin-top: 0.25em; }
        .dfn-panel ul { padding: 0; }
        .dfn-panel li { list-style: inside; }
        .dfn-panel.activated {
            display: inline-block;
            position: fixed;
            left: .5em;
            bottom: 2em;
            margin: 0 auto;
            max-width: calc(100vw - 1.5em - .4em - .5em);
            max-height: 30vh;
        }

        .dfn-paneled { cursor: pointer; }
        </style>
<style>/* style-selflinks */

.heading, .issue, .note, .example, li, dt {
    position: relative;
}
a.self-link {
    position: absolute;
    top: 0;
    left: calc(-1 * (3.5rem - 26px));
    width: calc(3.5rem - 26px);
    height: 2em;
    text-align: center;
    border: none;
    transition: opacity .2s;
    opacity: .5;
}
a.self-link:hover {
    opacity: 1;
}
.heading > a.self-link {
    font-size: 83%;
}
li > a.self-link {
    left: calc(-1 * (3.5rem - 26px) - 2em);
}
dfn > a.self-link {
    top: auto;
    left: auto;
    opacity: 0;
    width: 1.5em;
    height: 1.5em;
    background: gray;
    color: white;
    font-style: normal;
    transition: opacity .2s, background-color .2s, color .2s;
}
dfn:hover > a.self-link {
    opacity: 1;
}
dfn > a.self-link:hover {
    color: black;
}

a.self-link::before            { content: "¶"; }
.heading > a.self-link::before { content: "§"; }
dfn > a.self-link::before      { content: "#"; }</style>
<style>/* style-autolinks */

.css.css, .property.property, .descriptor.descriptor {
    color: #005a9c;
    font-size: inherit;
    font-family: inherit;
}
.css::before, .property::before, .descriptor::before {
    content: "‘";
}
.css::after, .property::after, .descriptor::after {
    content: "’";
}
.property, .descriptor {
    /* Don't wrap property and descriptor names */
    white-space: nowrap;
}
.type { /* CSS value <type> */
    font-style: italic;
}
pre .property::before, pre .property::after {
    content: "";
}
[data-link-type="property"]::before,
[data-link-type="propdesc"]::before,
[data-link-type="descriptor"]::before,
[data-link-type="value"]::before,
[data-link-type="function"]::before,
[data-link-type="at-rule"]::before,
[data-link-type="selector"]::before,
[data-link-type="maybe"]::before {
    content: "‘";
}
[data-link-type="property"]::after,
[data-link-type="propdesc"]::after,
[data-link-type="descriptor"]::after,
[data-link-type="value"]::after,
[data-link-type="function"]::after,
[data-link-type="at-rule"]::after,
[data-link-type="selector"]::after,
[data-link-type="maybe"]::after {
    content: "’";
}

[data-link-type].production::before,
[data-link-type].production::after,
.prod [data-link-type]::before,
.prod [data-link-type]::after {
    content: "";
}

[data-link-type=element],
[data-link-type=element-attr] {
    font-family: Menlo, Consolas, "DejaVu Sans Mono", monospace;
    font-size: .9em;
}
[data-link-type=element]::before { content: "<" }
[data-link-type=element]::after  { content: ">" }

[data-link-type=biblio] {
    white-space: pre;
}</style>
 <body class="h-entry">
  <div class="head">
   <p data-fill-with="logo"></p>
   <h1 class="p-name no-ref" id="title">AV1 Still Image File Format (AVIF)</h1>
   <h2 class="no-num no-toc no-ref heading settled" id="subtitle"><span class="content">Living Standard, <time class="dt-updated" datetime="2017-12-13">13 December 2017</time></span></h2>
   <div data-fill-with="spec-metadata">
    <dl>
     <dt>This version:
     <dd><a class="u-url" href="https://AOMediaCodec.github.io/av1-avif">https://AOMediaCodec.github.io/av1-avif</a>
     <dt>Issue Tracking:
     <dd><a href="https://github.com/AOMediaCodec/av1-avif/issues/">GitHub</a>
     <dt class="editor">Editor:
     <dd class="editor p-author h-card vcard"><a class="p-name fn u-email email" href="mailto:pkerr@netflix.com">Paul Kerr</a> (<span class="p-org org">Netflix</span>)
    </dl>
   </div>
   <div data-fill-with="warning">
    <details class="annoying-warning" open="">
     <summary>Warning</summary>
     <p>This specification is still at draft stage and should not be referenced other than as a working draft.</p>
    </details>
   </div>
   <hr title="Separator for header">
  </div>
  <div class="p-summary" data-fill-with="abstract">
   <h2 class="no-num no-toc no-ref heading settled" id="abstract"><span class="content">Abstract</span></h2>
   <p>This document specifies how to store <a data-link-type="biblio" href="#biblio-av1">[AV1]</a> still images in a file using <a data-link-type="biblio" href="#biblio-isobmff">[ISOBMFF]</a> structures.</p>
  </div>
  <div data-fill-with="at-risk"></div>
  <nav data-fill-with="table-of-contents" id="toc">
   <h2 class="no-num no-toc no-ref" id="contents">Table of Contents</h2>
   <ol class="toc" role="directory">
    <li>
     <a href="#overview"><span class="secno">1</span> <span class="content">Overview</span></a>
     <ol class="toc">
      <li><a href="#target-features"><span class="secno">1.1</span> <span class="content">Target Features</span></a>
     </ol>
    <li>
     <a href="#terms-and-definitions"><span class="secno">2</span> <span class="content">Terms and Definitions</span></a>
     <ol class="toc">
      <li><a href="#def-alpha-image"><span class="secno">2.1</span> <span class="content"><span>Alpha Image</span></span></a>
      <li><a href="#def-auxiliary-image"><span class="secno">2.2</span> <span class="content"><span>Auxiliary Image</span></span></a>
      <li><a href="#def-cover-image"><span class="secno">2.3</span> <span class="content"><span>Cover Image</span></span></a>
      <li><a href="#def-image-collection"><span class="secno">2.4</span> <span class="content"><span>Image Collection</span></span></a>
      <li><a href="#def-image-properties"><span class="secno">2.5</span> <span class="content"><span>Image Properties</span></span></a>
      <li><a href="#def-image-sequence"><span class="secno">2.6</span> <span class="content"><span>Image Sequence</span></span></a>
      <li><a href="#def-master-image"><span class="secno">2.7</span> <span class="content"><span>Master Image</span></span></a>
      <li><a href="#def-metadata"><span class="secno">2.8</span> <span class="content"><span>Metadata</span></span></a>
      <li><a href="#def-thumbnail-image"><span class="secno">2.9</span> <span class="content"><span>Thumbnail Image</span></span></a>
     </ol>
    <li>
     <a href="#object-model-and-structure"><span class="secno">3</span> <span class="content">Object Model and Structure</span></a>
     <ol class="toc">
      <li><a href="#image-storage"><span class="secno">3.1</span> <span class="content">Image Storage</span></a>
      <li><a href="#image-collection-elements"><span class="secno">3.2</span> <span class="content">Image Collection Elements</span></a>
      <li><a href="#image-sequence-elements"><span class="secno">3.3</span> <span class="content">Image Sequence Elements</span></a>
      <li><a href="#thumbnails"><span class="secno">3.4</span> <span class="content">Thumbnails</span></a>
      <li><a href="#cover-image①"><span class="secno">3.5</span> <span class="content">Cover Image</span></a>
      <li><a href="#alpha-channel"><span class="secno">3.6</span> <span class="content">Alpha Channel</span></a>
      <li><a href="#metadata①"><span class="secno">3.7</span> <span class="content">Metadata</span></a>
     </ol>
    <li>
     <a href="#file-format"><span class="secno">4</span> <span class="content">File Format</span></a>
     <ol class="toc">
      <li>
       <a href="#common-elements"><span class="secno">4.1</span> <span class="content">Common Elements</span></a>
       <ol class="toc">
        <li><a href="#file-type-box"><span class="secno">4.1.1</span> <span class="content">FileTypeBox</span></a>
       </ol>
      <li>
       <a href="#collection-elements"><span class="secno">4.2</span> <span class="content">Collection Elements</span></a>
       <ol class="toc">
        <li><a href="#meta-box"><span class="secno">4.2.1</span> <span class="content">MetaBox</span></a>
        <li><a href="#handler-box"><span class="secno">4.2.2</span> <span class="content">HandlerBox</span></a>
        <li><a href="#primary-item-box"><span class="secno">4.2.3</span> <span class="content">PrimaryItemBox</span></a>
        <li><a href="#item-location-box"><span class="secno">4.2.4</span> <span class="content">ItemLocationBox</span></a>
        <li><a href="#item-properties-box"><span class="secno">4.2.5</span> <span class="content">ItemPropertiesBox</span></a>
        <li><a href="#item-info-box"><span class="secno">4.2.6</span> <span class="content">ItemInfoBox</span></a>
        <li><a href="#item-reference-box"><span class="secno">4.2.7</span> <span class="content">ItemReferenceBox</span></a>
        <li><a href="#item-data-box"><span class="secno">4.2.8</span> <span class="content">ItemDataBox</span></a>
       </ol>
      <li>
       <a href="#sequence-elements"><span class="secno">4.3</span> <span class="content">Sequence Elements</span></a>
       <ol class="toc">
        <li><a href="#movie-box"><span class="secno">4.3.1</span> <span class="content">MovieBox</span></a>
        <li><a href="#track-header-box"><span class="secno">4.3.2</span> <span class="content">TrackHeaderBox</span></a>
        <li><a href="#track-reference-box"><span class="secno">4.3.3</span> <span class="content">TrackReferenceBox</span></a>
        <li><a href="#media-box"><span class="secno">4.3.4</span> <span class="content">MediaBox</span></a>
        <li><a href="#sample-table-box"><span class="secno">4.3.5</span> <span class="content">SampleTableBox</span></a>
        <li><a href="#data-reference-box"><span class="secno">4.3.6</span> <span class="content">DataReferenceBox</span></a>
       </ol>
     </ol>
    <li><a href="#conformance"><span class="secno"></span> <span class="content"> Conformance</span></a>
    <li>
     <a href="#index"><span class="secno"></span> <span class="content">Index</span></a>
     <ol class="toc">
      <li><a href="#index-defined-here"><span class="secno"></span> <span class="content">Terms defined by this specification</span></a>
     </ol>
    <li>
     <a href="#references"><span class="secno"></span> <span class="content">References</span></a>
     <ol class="toc">
      <li><a href="#normative"><span class="secno"></span> <span class="content">Normative References</span></a>
     </ol>
   </ol>
  </nav>
  <main>
   <h2 class="heading settled" data-level="1" id="overview"><span class="secno">1. </span><span class="content">Overview</span><a class="self-link" href="#overview"></a></h2>
   <p>AVIF is a file format wrapping compressed images based on the <a href="http://aomedia.org">Alliance for Open Media</a> AV1 intra-frame encoding toolkit. AVIF supports High Dynamic Range (HDR) and wide color gamut (WCG) images as well as standard dynamic range (SDR). Only the intra-frame encoding toolkit is used in AVIF version 1.0. Using the intra-frame encoding mechanism from an existing video codec standard has a precedent in WebP: VP8, and HEIF: HEVC. This document describes at a high level a proposal on the structure of AVIF version 1.0. </p>
   <p>The initial version of AVIF seeks to be simple, with just enough structure to allow the distribution of images based on the AV1 intra-frame coding toolset. At its core, AVIF 1.0 will allow for one or more images plus all supporting data needed to correctly reconstruct and display the images to be conveyed in a file. The ability to embed a thumbnail image will also be provided. An image sequence with suggested playback timing may be defined. </p>
   <h3 class="heading settled" data-level="1.1" id="target-features"><span class="secno">1.1. </span><span class="content">Target Features</span><a class="self-link" href="#target-features"></a></h3>
   <ul>
    <li>AV1 intra-frame codec toolkit
    <li>Multiple image storage: untimed unordered collection
    <li>Animation: timed sequence of images
    <li>Thumbnail image
    <li>Alpha channel
    <li>Extensible image metadata
   </ul>
   <h2 class="heading settled" data-level="2" id="terms-and-definitions"><span class="secno">2. </span><span class="content">Terms and Definitions</span><a class="self-link" href="#terms-and-definitions"></a></h2>
   <h3 class="heading settled" data-level="2.1" id="def-alpha-image"><span class="secno">2.1. </span><span class="content"><dfn class="dfn-paneled" data-dfn-type="dfn" data-noexport="" id="alpha-image">Alpha Image</dfn></span><a class="self-link" href="#def-alpha-image"></a></h3>
   <p>A specific type of <a data-link-type="dfn" href="#auxiliary-image" id="ref-for-auxiliary-image">Auxiliary Image</a> that may be used to convey information representing the opacity of associated <a data-link-type="dfn" href="#master-image" id="ref-for-master-image">Master Images</a>. </p>
   <h3 class="heading settled" data-level="2.2" id="def-auxiliary-image"><span class="secno">2.2. </span><span class="content"><dfn class="dfn-paneled" data-dfn-type="dfn" data-noexport="" id="auxiliary-image">Auxiliary Image</dfn></span><a class="self-link" href="#def-auxiliary-image"></a></h3>
   <p>An image that is not be intended to be displayed but provides supplemental information for associated <a data-link-type="dfn" href="#master-image" id="ref-for-master-image①">Master Images</a>. AVIF allows only one type of Auxiliary Image: an <a data-link-type="dfn" href="#alpha-image" id="ref-for-alpha-image">Alpha Image</a>. </p>
   <h3 class="heading settled" data-level="2.3" id="def-cover-image"><span class="secno">2.3. </span><span class="content"><dfn data-dfn-type="dfn" data-noexport="" id="cover-image">Cover Image<a class="self-link" href="#cover-image"></a></dfn></span><a class="self-link" href="#def-cover-image"></a></h3>
   <p>A <a data-link-type="dfn" href="#master-image" id="ref-for-master-image②">Master Image</a> that may be used to represent the file contents. An example of this is a single image used to represent an animation before the animation sequence is activated. </p>
   <h3 class="heading settled" data-level="2.4" id="def-image-collection"><span class="secno">2.4. </span><span class="content"><dfn data-dfn-type="dfn" data-noexport="" id="image-collection">Image Collection<a class="self-link" href="#image-collection"></a></dfn></span><a class="self-link" href="#def-image-collection"></a></h3>
   <p>One or more <a data-link-type="dfn" href="#master-image" id="ref-for-master-image③">Master Images</a> stored as items in a single file with no defined order or timing information. Within a collection, groups of image samples may share properties and metadata. </p>
   <h3 class="heading settled" data-level="2.5" id="def-image-properties"><span class="secno">2.5. </span><span class="content"><dfn data-dfn-type="dfn" data-noexport="" id="image-properties">Image Properties<a class="self-link" href="#image-properties"></a></dfn></span><a class="self-link" href="#def-image-properties"></a></h3>
   <p>This is a class of non-media data. The property items may be descriptive image attributes or decoder configuration data. The properties are primarily for consumption by the decoding agent. This information may include:</p>
   <ul>
    <li>decoder specific configuration and initialization values
    <li>image width and height
    <li>pixel attributes
    <li>color space
   </ul>
   <h3 class="heading settled" data-level="2.6" id="def-image-sequence"><span class="secno">2.6. </span><span class="content"><dfn data-dfn-type="dfn" data-noexport="" id="image-sequence">Image Sequence<a class="self-link" href="#image-sequence"></a></dfn></span><a class="self-link" href="#def-image-sequence"></a></h3>
   <p>A sequence of <a data-link-type="dfn" href="#master-image" id="ref-for-master-image④">Master Images</a> stored as a track for which information is provided that defines a sequential ordering and temporal information indicating suggested playback timing. An agent decoding and presenting an AVIF file may chose to render an Image Sequence as an animation. </p>
   <h3 class="heading settled" data-level="2.7" id="def-master-image"><span class="secno">2.7. </span><span class="content"><dfn class="dfn-paneled" data-dfn-type="dfn" data-noexport="" id="master-image">Master Image</dfn></span><a class="self-link" href="#def-master-image"></a></h3>
   <p>An image that is not a thumbnail or auxiliary image. For the purpose of this specification, such an image is encoded using AV1 intra-frame tools. This type of image is the primary displayable payload of an AVIF file. A Master Image may be used as a member of both an Image Collection and an Image Sequence. </p>
   <h3 class="heading settled" data-level="2.8" id="def-metadata"><span class="secno">2.8. </span><span class="content"><dfn data-dfn-type="dfn" data-noexport="" id="metadata">Metadata<a class="self-link" href="#metadata"></a></dfn></span><a class="self-link" href="#def-metadata"></a></h3>
   <p>Metadata conveys image attributes that are not used to decode or reconstruct an image. This data is considered to be non-essential and non-normative. Examples of this include EXIF, XMP, and MPEG-7. An AVIF reader will not be required to extract metadata from a Informational Metadata boxes. Essential information shall be carried in the image media directly or be conveyed as Image Properties. </p>
   <h3 class="heading settled" data-level="2.9" id="def-thumbnail-image"><span class="secno">2.9. </span><span class="content"><dfn data-dfn-type="dfn" data-noexport="" id="thumbnail-image">Thumbnail Image<a class="self-link" href="#thumbnail-image"></a></dfn></span><a class="self-link" href="#def-thumbnail-image"></a></h3>
   <p>This is a non-master image that may be used to represent one or more <a data-link-type="dfn" href="#master-image" id="ref-for-master-image⑤">Master Images</a> found in an AVIF file. It is typically of a smaller scale than the Master Images. Its compression format may be different than the one used by the Master Images. </p>
   <h2 class="heading settled" data-level="3" id="object-model-and-structure"><span class="secno">3. </span><span class="content">Object Model and Structure</span><a class="self-link" href="#object-model-and-structure"></a></h2>
   <p>An AVIF file should be a simplified and conformant version of an <a data-link-type="biblio" href="#biblio-heif">[HEIF]</a> file. This is to allow for the deployment of general libraries that may be used to create and parse HEIF-based image files wrapping different coding methods for the actual image content. This should be similar to ISO-BMFF usage in the video domain. </p>
   <p>The AVIF file format will be built on the box-structured media interchange format introduced by the ISO Base Media File Format (<a data-link-type="biblio" href="#biblio-isobmff">[ISOBMFF]</a>). The format specified by AVIF defines the use of a subset of box structures introduced in ISOBMFF. Where the necessary structures do not exist in ISOBMFF, structures defined as part of the High Efficiency Image File Format (<a data-link-type="biblio" href="#biblio-heif">[HEIF]</a>: ISO/IEC 23008-12) that are codec neutral and can be applied in a generic manner are used. An AVIF version 1.0 file shall be compliant to the requirements of Clause 4 of the <a data-link-type="biblio" href="#biblio-isobmff">[ISOBMFF]</a> specification, and where applicable, the recommendations in Annex I: Guidelines On Defining New Image Formats and Brands in the MPEG HEIF specification shall be followed for AVIF 1.0. </p>
   <h3 class="heading settled" data-level="3.1" id="image-storage"><span class="secno">3.1. </span><span class="content">Image Storage</span><a class="self-link" href="#image-storage"></a></h3>
   <p>All of the constituent elements, including image samples, shall be contained in a single file. All media data locations, regardless of construction method, shall resolve to an offset within an AVIF file. </p>
   <h3 class="heading settled" data-level="3.2" id="image-collection-elements"><span class="secno">3.2. </span><span class="content">Image Collection Elements</span><a class="self-link" href="#image-collection-elements"></a></h3>
   <p>An Image Collection is the most basic format of an AVIF file. This form should be used for the case of a single image, or when a group of images that have no logical or temporal sequencing. </p>
   <p>Image Collections are structured as items defined in a single file-level MetaBox. Each master, thumbnail or auxiliary image that are a component of the Image Collection shall have an item definition in this MetaBox. Items have no timing information. Any association between a Master Image and an Auxiliary or Thumbnail image must be defined explicitly. </p>
   <p>An AVIF file containing an Image Collection shall list the "mif1" brand as one of the entries in the compatible_brands array and conform to section 10.1 of <a data-link-type="biblio" href="#biblio-heif">[HEIF]</a>. All boxes used to structure a collection are located at the file level within a MetaBox: there are no track level boxes. The image data for a collection may be stored within an ItemDataBox or a MediaDataBox. </p>
   <p>The images stored in the file are listed in an ItemLocationBox. A unique ItemLocationBox entry shall be used to reference the media data for each image in the collection: Master, Thumbnail and Alpha images. Each image shall have an entry in the ItemLocationBox. </p>
   <p>The type of the item element is identified in an entry in the ItemInfoBox. Every ItemLocationBox entry shall have a matching entry in the ItemInfoBox cross referenced by the item_ID. </p>
   <p>The images making up an Image Collection do not need to have the same Image Properties. A specific property may be assigned to one or more of the images within the Image Collection using an ItemPropertyBox entry. </p>
   <h3 class="heading settled" data-level="3.3" id="image-sequence-elements"><span class="secno">3.3. </span><span class="content">Image Sequence Elements</span><a class="self-link" href="#image-sequence-elements"></a></h3>
   <p>Image Sequences are structured as tracks. An individual track shall contain one type of image: master, auxiliary or thumbnail. Associations between a thumbnail or auxiliary image, and a master image, is determined by finding components of each track that are time-parallel as defined by procedures detailed in <a data-link-type="biblio" href="#biblio-isobmff">[ISOBMFF]</a>. </p>
   <p>An AVIF file containing an Image Sequence shall list the "msf1" brand as one of the entries in the compatible_brands array. </p>
   <p>The timing information provided for a Master Image track is advisory. However, the timing relationship between the master track and any associated non-master track shall be treated strictly when used to determine which images are time-parallel. </p>
   <p>All Master Images that are part of a sequence shall share the same Image Properties. Any Image Properties assigned to the sequence shall be linked to the track and shall not be linked to an individual image sample. Image Properties are linked to tracks by setting the item_ID field of an ItemPropertyAssociation to a track_id. </p>
   <p>The determination as to which master track images a non-master image is bound to is made after the decoding sample time is reconstructed for all tracks of the Image Sequence using the TimeToSampleBox (stts) information associated with each track. A non-master image is linked to each master image that has a decode time equal the decode time for that image or falls within the period before the decode time of the next non-master image in the track sequence. </p>
   <figure>
     <img alt="Determining time-parallel images between track using decode time." src="images/track_matching.svg"> 
    <figcaption>Determining time-parallel images between track using decode time</figcaption>
   </figure>
   <h3 class="heading settled" data-level="3.4" id="thumbnails"><span class="secno">3.4. </span><span class="content">Thumbnails</span><a class="self-link" href="#thumbnails"></a></h3>
   <p>For Image Collections, a Thumbnail Image and one or more Master Images shall be linked using an ItemReferenceBox entry with a referenceType of "thmb" in the file-level MetaBox. A single thumbnail may be linked to multiple non-sequential Master Images in the collection. </p>
   <p>For Image Sequences, a Thumbnail Image track may be associated with the Master Image track. The thumbnail track may contain one or more images. The number of Thumbnail Images shall not exceed the number of Master Images. Presentation timing for the thumbnail track is derived from the track-level TimeToSampleBox and may be treated as advisory for playback. A thumbnail track shall be associated with the primary track using a TrackReferenceBox with a referenceType of "thmb". </p>
   <h3 class="heading settled" data-level="3.5" id="cover-image①"><span class="secno">3.5. </span><span class="content">Cover Image</span><a class="self-link" href="#cover-image①"></a></h3>
   <p>A Cover Image differs from a Thumbnail Image in that it is also a Master Image.
    For Image Collections, a PrimaryItemBox found in the file-level MetaBox may be used to
    indicate the image item that is to be considered the Cover Image. This image item
    shall be a master image. If not explicitly indicated in the above manner, the
    Cover Image shall be assumed to be the first master image entry in the ItemLocationBox. </p>
   <p>For an Image Sequence, a PrimaryItemBox in a MetaBox found in the TrackBox
    of the master image track may be used to indicate the Cover Image. The MetaBox
    containing this PrimaryItemBox shall have a HandlerBox with a hander_type set to "pict"
    and an ItemLocationBox that has an entry with the same item_ID that is contained
    in the PrimaryItemBox. The item identified by the item_ID shall a Master Image.
    If not explicitly indicated in the above manner, the Cover Image shall be assumed
    to be first entry in the master track. </p>
   <h3 class="heading settled" data-level="3.6" id="alpha-channel"><span class="secno">3.6. </span><span class="content">Alpha Channel</span><a class="self-link" href="#alpha-channel"></a></h3>
   <p>An Alpha Image is a specific type of auxiliary image that is used to carry per pixel opacity information for one or more Master Images. This is the only type of Auxiliary Image supported by AVIF. </p>
   <p>A URN will be defined to identify AVIF alpha auxiliary images or tracks. For the purposes of this draft the placeholder urn:aom:avif:alpha will be used. </p>
   <p>A brand that represents the encoding format of the alpha image shall be placed in the compatible_brands array of the FileTypeBox. </p>
   <p>The alpha image shall have the same dimensional attributes as the largest channel plane in the Master Image: width, height, and pixel aspect ratio. Furthermore, the pixels of the Alpha Image shall overlay the pixels of the largest component plane of any linked Master Image exactly. For example, for YUV 4:2:x, this would be the Y component plane. The decoded value of an alpha pixel is shall be a normalized unsigned integer of at least 8 bits representing a value between 0.0 and 1.0 or a floating point value between 0.0 and 1.0. </p>
   <p>For an Image Collection, Alpha Images and Master Images shall be linked using an ItemReferenceBox entry with a reference type of "auxl". A single Alpha Image may be linked to one or more Master Images. The total number of Alpha Images shall not exceed the number of Master Images. When an Alpha Image applies to a subset of the Master Image items this shall constrain all Master Images in that subset to have the same dimensional attributes. </p>
   <p>When the AVIF file is structured as an Image Sequence, Alpha images may be associated with an Image Sequence using an associated auxiliary track. This track shall have a TrackReferenceBox with a referenceType of "auxl" with an auxiliary type of urn:aom:avif:alpha. For AVIF, only one alpha track may be included in the file. Linking of samples in the Alpha Image track and Master Image track is defined by derived parallel time alignment using each stream’s TimeToSampleBox. The timing relationship between alpha track and primary track is strict and shall not be treated as advisory. At a minimum, the alpha track shall contain a single image. </p>
   <h3 class="heading settled" data-level="3.7" id="metadata①"><span class="secno">3.7. </span><span class="content">Metadata</span><a class="self-link" href="#metadata①"></a></h3>
   <p>Metadata is associated through a "cdsc" (content describes) item referenceType element in an ItemReferenceBox for an Image Collection, or a TrackReferenceBox for an Image Sequence. A conforming AVIF reader may ignore all metadata. </p>
   <h2 class="heading settled" data-level="4" id="file-format"><span class="secno">4. </span><span class="content">File Format</span><a class="self-link" href="#file-format"></a></h2>
   <h3 class="heading settled" data-level="4.1" id="common-elements"><span class="secno">4.1. </span><span class="content">Common Elements</span><a class="self-link" href="#common-elements"></a></h3>
   <h4 class="heading settled" data-level="4.1.1" id="file-type-box"><span class="secno">4.1.1. </span><span class="content">FileTypeBox</span><a class="self-link" href="#file-type-box"></a></h4>
   <p>Each AVIF file will begin with a FileTypeBox. This shall be the first box in the file and may only be preceded by non-ISOBMFF data when necessary. The box should identify this file as conforming to HEIF with specific branding registered for AVIF. </p>
   <p>If the major_brand field is set to "avif" then the minor_version shall be set to 0. </p>
   <p>If the major_brand field is not set to "avif", then the brand "avif" shall appear in the compatible_brands array. </p>
   <p>The compatible_brands array shall contain "mif1" if the file contains an Image Collection. </p>
   <p>The compatible_brands array shall contain "msf1" if the file contains an Image Sequence. </p>
   <p>The compatible_brands array shall contain an appropriate brand for the encoding used for thumbnails images if it is not AV1. </p>
   <p>The compatible_brands array shall contain an appropriate brand for the encoding used for alpha images if it is not AV1. </p>
   <h3 class="heading settled" data-level="4.2" id="collection-elements"><span class="secno">4.2. </span><span class="content">Collection Elements</span><a class="self-link" href="#collection-elements"></a></h3>
   <p>An AVIF file reader must be able recognize the following boxes. Any box field or feature not explicitly limited by this specification should be handled as defined in ISO 14496‑12 and ISO 23008-12. </p>
   <table class="complex data" style="border: 2px solid;">
    <colgroup>
     <col span="3">
     <col style="border-right: 2px solid; border-left: 2px solid">
    <thead>
     <tr>
      <td colspan="3" rowspan="1">box hierarchy
      <td>version
      <td>box description
    <tbody>
     <tr>
      <td>ftyp
      <td>
      <td>
      <td>-
      <td>file type
     <tr>
      <td>meta
      <td>
      <td>
      <td>0
      <td>metadata container box
     <tr>
      <td>
      <td>hdlr
      <td>
      <td>0
      <td>handler type definition
     <tr>
      <td>
      <td>pitm
      <td>
      <td>0,1
      <td>primary item reference
     <tr>
      <td>
      <td>iloc
      <td>
      <td>0,1,2
      <td>item location table
     <tr>
      <td>
      <td>iinf
      <td>
      <td>0,1
      <td>item information table
     <tr>
      <td>
      <td>
      <td>infe
      <td>2,3
      <td>item information table entry
     <tr>
      <td>
      <td>iprp
      <td>
      <td>-
      <td>item properties container box
     <tr>
      <td>
      <td>
      <td>ipco
      <td>0
      <td>item property definitions
     <tr>
      <td>
      <td>
      <td>ipma
      <td>0,1
      <td>item property associations
   </table>
   <h4 class="heading settled" data-level="4.2.1" id="meta-box"><span class="secno">4.2.1. </span><span class="content">MetaBox</span><a class="self-link" href="#meta-box"></a></h4>
   <p>A file-level MetaBox shall follow immediately after the FileTypeBox if the file contains an Image Collection. </p>
   <h4 class="heading settled" data-level="4.2.2" id="handler-box"><span class="secno">4.2.2. </span><span class="content">HandlerBox</span><a class="self-link" href="#handler-box"></a></h4>
   <p>The handler type for the MetaBox shall be "pict". </p>
   <h4 class="heading settled" data-level="4.2.3" id="primary-item-box"><span class="secno">4.2.3. </span><span class="content">PrimaryItemBox</span><a class="self-link" href="#primary-item-box"></a></h4>
   <p>One PrimaryItemBox may be used in this MetaBox to provide a reference to a Cover Image.
  The image referenced by the PrimaryItemBox shall be a Master Image.
  The PrimaryItemBox shall come before the ItemLocationBox. </p>
   <h4 class="heading settled" data-level="4.2.4" id="item-location-box"><span class="secno">4.2.4. </span><span class="content">ItemLocationBox</span><a class="self-link" href="#item-location-box"></a></h4>
   <p>The data_reference_index for any AVIF conformant element in the ItemLocationBox table entry shall be set to zero. </p>
   <p>The construction_method value of 2 shall not be used. </p>
   <h4 class="heading settled" data-level="4.2.5" id="item-properties-box"><span class="secno">4.2.5. </span><span class="content">ItemPropertiesBox</span><a class="self-link" href="#item-properties-box"></a></h4>
   <p>Item Properties are associated with an item using an ItemPropertiesBox. The type of each property is uniquely identified with a fourCC. Two categories of image properties may be found in an AVIF file. </p>
   <p>The first are decoder specific configuration and initialization properties. The AVIF codec configuration property will be identified with an property type of "av1C". Non-master image types recommendations may also define codec configuration property formats and usage rules. </p>
   <p>The second are image descriptive properties conveying the attributes of the encoded image and, by implication, the reconstructed image post decode. The descriptive image properties that may be used in AVIF compliant files are: </p>
   <ul>
    <li>Image Spatial Extents (ispe)
    <li>Pixel Aspect Ratio (pasp)
    <li>Colour Information (colr)
    <li>Pixel Information (pixi)
    <li>Image properties for auxiliary images (auxC)
   </ul>
   <h4 class="heading settled" data-level="4.2.6" id="item-info-box"><span class="secno">4.2.6. </span><span class="content">ItemInfoBox</span><a class="self-link" href="#item-info-box"></a></h4>
   <p>All images samples that are members of the Image Collection shall have an entry in the ItemInfoBox item_infos table. This includes primary, thumbnail, and alpha images </p>
   <p>Image samples of the collection shall use version 2 or 3 of the ItemInfoEntry box. </p>
   <p>Each ItemInfoEntry referencing a master image shall have an item_type of "av1i". </p>
   <p>Each ItemInfoEntry referencing an alpha plane image shall have an item_type field of"uri" and an item_uri_type set to "urn:aom:avif:alpha". </p>
   <p>Each ItemInfoEntry referencing a thumbnail image shall have an item_type field set to either"av1i" or"jpeg". </p>
   <p>The item_name is optional. A single byte null string shall be used to indicate an empty item_name. </p>
   <h4 class="heading settled" data-level="4.2.7" id="item-reference-box"><span class="secno">4.2.7. </span><span class="content">ItemReferenceBox</span><a class="self-link" href="#item-reference-box"></a></h4>
   <p>An AVIF file reader shall support item references of the following types: </p>
   <ul>
    <li>"auxl" auxiliary image; limited to an aux_type of urn:aom:avif:alpha
    <li>"thmb" thumbnail image; limited to"av1i" or"jpeg"
   </ul>
   <p>An AVIF file reader may optionally support item references of the follow type: </p>
   <ul>
    <li>"cdsc" content description
   </ul>
   <h4 class="heading settled" data-level="4.2.8" id="item-data-box"><span class="secno">4.2.8. </span><span class="content">ItemDataBox</span><a class="self-link" href="#item-data-box"></a></h4>
   <p>An ItemDataBox shall be used if any ItemLocationBox entry has an"idat" construction method. </p>
   <h3 class="heading settled" data-level="4.3" id="sequence-elements"><span class="secno">4.3. </span><span class="content">Sequence Elements</span><a class="self-link" href="#sequence-elements"></a></h3>
   <p>An AVIF file reader must be able recognize the following boxes. Any box field or feature not explicitly limited by this specification should be handled as defined in ISO 14496‑12 and ISO 23008-12. </p>
   <table class="complex data" style="border: 2px solid;">
    <colgroup>
     <col span="4">
     <col style="border-right: 2px solid; border-left: 2px solid">
    <thead>
     <tr>
      <td colspan="4" rowspan="1">box hierarchy
      <td>version
      <td>box description
    <tbody>
     <tr>
      <td>ftyp
      <td>
      <td>
      <td>
      <td>-
      <td>file type
     <tr>
      <td>moov
      <td>
      <td>
      <td>
      <td>-
      <td>movie container box
     <tr>
      <td>
      <td>trak
      <td>
      <td>
      <td>-
      <td>track container box
     <tr>
      <td>
      <td>tkhd
      <td>
      <td>
      <td>0,1
      <td>track header
     <tr>
      <td>
      <td>tref
      <td>
      <td>
      <td>-
      <td>track references
     <tr>
      <td>
      <td>mdia
      <td>
      <td>
      <td>-
      <td>media information container
     <tr>
      <td>
      <td>mdhd
      <td>
      <td>
      <td>0,1
      <td>media information header
     <tr>
      <td>
      <td>hdlr
      <td>
      <td>
      <td>0
      <td>media handler type
     <tr>
      <td>
      <td>minf
      <td>
      <td>
      <td>-
      <td>media information box
     <tr>
      <td>
      <td>
      <td>vmhd
      <td>
      <td>
      <td>video media header
     <tr>
      <td>
      <td>
      <td>dinf
      <td>
      <td>-
      <td>data information container
     <tr>
      <td>
      <td>
      <td>
      <td>dref
      <td>0
      <td>data references for track sources
     <tr>
      <td>
      <td>
      <td>stbl
      <td>
      <td>-
      <td>sample table mapping container
     <tr>
      <td>
      <td>
      <td>
      <td>stts
      <td>0
      <td>sample to decode time table
     <tr>
      <td>
      <td>
      <td>
      <td>stsd
      <td>
      <td>sample description(visual sample entry box subclass)
     <tr>
      <td>
      <td>
      <td>
      <td>stsz
      <td>0
      <td>sample size table
     <tr>
      <td>
      <td>
      <td>
      <td>stsc
      <td>0
      <td>sample to chunk table
     <tr>
      <td>
      <td>
      <td>
      <td>stco
      <td>0
      <td>chunk offset table
     <tr>
      <td>mdat
      <td>
      <td>
      <td>
      <td>-
      <td>
   </table>
   <h4 class="heading settled" data-level="4.3.1" id="movie-box"><span class="secno">4.3.1. </span><span class="content">MovieBox</span><a class="self-link" href="#movie-box"></a></h4>
   <pthe U0003C="" a="" after="" be="" contained="" directly="" either="" existsU0002C="" file-level="" filetypebox.="" follow="" if="" image="" in="" metaboxU0002C="" moviebox="" moviebox.="" one="" or="" p="" sequence="" shall="" should="" the="" tracks="">
    <h4 class="heading settled" data-level="4.3.2" id="track-header-box"><span class="secno">4.3.2. </span><span class="content">TrackHeaderBox</span><a class="self-link" href="#track-header-box"></a></h4>
    <p>For a track of sample type "av1i" the flag field shall be set to track_enabled and track_in_movie. </p>
    <p>For "thmb" the track_in_preview flag shall be set and track_in_movie cleared. </p>
    <p>For "auxv" (auxiliary used to convey alpha images) tracks the flag field shall be set to zero. </p>
    <h4 class="heading settled" data-level="4.3.3" id="track-reference-box"><span class="secno">4.3.3. </span><span class="content">TrackReferenceBox</span><a class="self-link" href="#track-reference-box"></a></h4>
    <p>The reference_type values supported by an AVIF file shall be: </p>
    <ul>
     <li>"thmb"thumbnail track
     <li>"auxl"; only when the auxiliary track type is alpha
    </ul>
    <h4 class="heading settled" data-level="4.3.4" id="media-box"><span class="secno">4.3.4. </span><span class="content">MediaBox</span><a class="self-link" href="#media-box"></a></h4>
    <p>Each MediaBox associated with AVIF elements "av1i" and "thmb" shall contain a HandlerBox with the handler_type shall be set to "pict". </p>
    <p>For alpha auxiliary tracks, the handler_type of the HandlerBox shall be "auxv". </p>
    <h4 class="heading settled" data-level="4.3.5" id="sample-table-box"><span class="secno">4.3.5. </span><span class="content">SampleTableBox</span><a class="self-link" href="#sample-table-box"></a></h4>
    <p>The "av1i" codec configuration (see ItemPropertyBox above) block shall be used as the AV1 specific version of the SampleDescriptionBox for all AV1 encoded image tracks: primary and AV1 encoded thumbnail images. </p>
    <p>A JPEG encoded thumbnail shall conform to section H of the HEIF specification and use the "jpgC" JpegConfigurationBox as its sample descriptor. </p>
    <p>For an alpha track, the AuxiliaryTypeInfoBox shall be used as SampleDescriptionBox entry in the SampleTableBox for an alpha track. The aux_track_type shall be assigned the string urn:aom:avif:alpha. This is the only type of auxiliary track defined by this specification. </p>
    <h4 class="heading settled" data-level="4.3.6" id="data-reference-box"><span class="secno">4.3.6. </span><span class="content">DataReferenceBox</span><a class="self-link" href="#data-reference-box"></a></h4>
    <p>Only one type of DataReferenceBox table entry shall be used to define to the location of an AVIF media data element: the DataEntryUrlBox. Furthermore, the entry_flag must be set to 0x001 to signal that the data element resides in the same file as the containing DataReferenceBox. </p>
   </pthe>
  </main>
  <div data-fill-with="conformance">
   <h2 class="no-ref no-num heading settled" id="conformance"><span class="content"> Conformance</span><a class="self-link" href="#conformance"></a></h2>
   <p> Conformance requirements are expressed with a combination of descriptive assertions and RFC 2119 terminology.
            The key words “MUST”, “MUST NOT”, “REQUIRED”, “SHALL”, “SHALL NOT”, “SHOULD”, “SHOULD NOT”, “RECOMMENDED”, “MAY”, and “OPTIONAL”
            in the normative parts of this document
            are to be interpreted as described in RFC 2119.
            However, for readability,
            these words do not appear in all uppercase letters in this specification. </p>
   <p> All of the text of this specification is normative
            except sections explicitly marked as non-normative, examples, and notes. <a data-link-type="biblio" href="#biblio-rfc2119">[RFC2119]</a> </p>
   <p> Examples in this specification are introduced with the words “for example”
            or are set apart from the normative text with <code>class="example"</code>, like this: </p>
   <div class="example" id="example-example"><a class="self-link" href="#example-example"></a> This is an example of an informative example. </div>
   <p> Informative notes begin with the word “Note”
            and are set apart from the normative text with <code>class="note"</code>, like this: </p>
   <p class="note" role="note"> Note, this is an informative note. </p>
  </div>
<script>
(function() {
  "use strict";
  var collapseSidebarText = '<span aria-hidden="true">←</span> '
                          + '<span>Collapse Sidebar</span>';
  var expandSidebarText   = '<span aria-hidden="true">→</span> '
                          + '<span>Pop Out Sidebar</span>';
  var tocJumpText         = '<span aria-hidden="true">↑</span> '
                          + '<span>Jump to Table of Contents</span>';

  var sidebarMedia = window.matchMedia('screen and (min-width: 78em)');
  var autoToggle   = function(e){ toggleSidebar(e.matches) };
  if(sidebarMedia.addListener) {
    sidebarMedia.addListener(autoToggle);
  }

  function toggleSidebar(on) {
    if (on == undefined) {
      on = !document.body.classList.contains('toc-sidebar');
    }

    /* Don’t scroll to compensate for the ToC if we’re above it already. */
    var headY = 0;
    var head = document.querySelector('.head');
    if (head) {
      // terrible approx of "top of ToC"
      headY += head.offsetTop + head.offsetHeight;
    }
    var skipScroll = window.scrollY < headY;

    var toggle = document.getElementById('toc-toggle');
    var tocNav = document.getElementById('toc');
    if (on) {
      var tocHeight = tocNav.offsetHeight;
      document.body.classList.add('toc-sidebar');
      document.body.classList.remove('toc-inline');
      toggle.innerHTML = collapseSidebarText;
      if (!skipScroll) {
        window.scrollBy(0, 0 - tocHeight);
      }
      tocNav.focus();
      sidebarMedia.addListener(autoToggle); // auto-collapse when out of room
    }
    else {
      document.body.classList.add('toc-inline');
      document.body.classList.remove('toc-sidebar');
      toggle.innerHTML = expandSidebarText;
      if (!skipScroll) {
        window.scrollBy(0, tocNav.offsetHeight);
      }
      if (toggle.matches(':hover')) {
        /* Unfocus button when not using keyboard navigation,
           because I don’t know where else to send the focus. */
        toggle.blur();
      }
    }
  }

  function createSidebarToggle() {
    /* Create the sidebar toggle in JS; it shouldn’t exist when JS is off. */
    var toggle = document.createElement('a');
      /* This should probably be a button, but appearance isn’t standards-track.*/
    toggle.id = 'toc-toggle';
    toggle.class = 'toc-toggle';
    toggle.href = '#toc';
    toggle.innerHTML = collapseSidebarText;

    sidebarMedia.addListener(autoToggle);
    var toggler = function(e) {
      e.preventDefault();
      sidebarMedia.removeListener(autoToggle); // persist explicit off states
      toggleSidebar();
      return false;
    }
    toggle.addEventListener('click', toggler, false);


    /* Get <nav id=toc-nav>, or make it if we don’t have one. */
    var tocNav = document.getElementById('toc-nav');
    if (!tocNav) {
      tocNav = document.createElement('p');
      tocNav.id = 'toc-nav';
      /* Prepend for better keyboard navigation */
      document.body.insertBefore(tocNav, document.body.firstChild);
    }
    /* While we’re at it, make sure we have a Jump to Toc link. */
    var tocJump = document.getElementById('toc-jump');
    if (!tocJump) {
      tocJump = document.createElement('a');
      tocJump.id = 'toc-jump';
      tocJump.href = '#toc';
      tocJump.innerHTML = tocJumpText;
      tocNav.appendChild(tocJump);
    }

    tocNav.appendChild(toggle);
  }

  var toc = document.getElementById('toc');
  if (toc) {
    createSidebarToggle();
    toggleSidebar(sidebarMedia.matches);

    /* If the sidebar has been manually opened and is currently overlaying the text
       (window too small for the MQ to add the margin to body),
       then auto-close the sidebar once you click on something in there. */
    toc.addEventListener('click', function(e) {
      if(e.target.tagName.toLowerCase() == "a" && document.body.classList.contains('toc-sidebar') && !sidebarMedia.matches) {
        toggleSidebar(false);
      }
    }, false);
  }
  else {
    console.warn("Can’t find Table of Contents. Please use <nav id='toc'> around the ToC.");
  }

  /* Wrap tables in case they overflow */
  var tables = document.querySelectorAll(':not(.overlarge) > table.data, :not(.overlarge) > table.index');
  var numTables = tables.length;
  for (var i = 0; i < numTables; i++) {
    var table = tables[i];
    var wrapper = document.createElement('div');
    wrapper.className = 'overlarge';
    table.parentNode.insertBefore(wrapper, table);
    wrapper.appendChild(table);
  }

})();
</script>
  <h2 class="no-num no-ref heading settled" id="index"><span class="content">Index</span><a class="self-link" href="#index"></a></h2>
  <h3 class="no-num no-ref heading settled" id="index-defined-here"><span class="content">Terms defined by this specification</span><a class="self-link" href="#index-defined-here"></a></h3>
  <ul class="index">
   <li><a href="#alpha-image">Alpha Image</a><span>, in §2.1</span>
   <li><a href="#auxiliary-image">Auxiliary Image</a><span>, in §2.2</span>
   <li><a href="#cover-image">Cover Image</a><span>, in §2.3</span>
   <li><a href="#image-collection">Image Collection</a><span>, in §2.4</span>
   <li><a href="#image-properties">Image Properties</a><span>, in §2.5</span>
   <li><a href="#image-sequence">Image Sequence</a><span>, in §2.6</span>
   <li><a href="#master-image">Master Image</a><span>, in §2.7</span>
   <li><a href="#metadata">Metadata</a><span>, in §2.8</span>
   <li><a href="#thumbnail-image">Thumbnail Image</a><span>, in §2.9</span>
  </ul>
  <h2 class="no-num no-ref heading settled" id="references"><span class="content">References</span><a class="self-link" href="#references"></a></h2>
  <h3 class="no-num no-ref heading settled" id="normative"><span class="content">Normative References</span><a class="self-link" href="#normative"></a></h3>
  <dl>
   <dt id="biblio-av1">[AV1]
   <dd><a href="http://av1-spec.argondesign.com/av1-spec/av1-spec.html">AV1 Bitstream &amp; Decoding Process Specification</a>. LS. URL: <a href="http://av1-spec.argondesign.com/av1-spec/av1-spec.html">http://av1-spec.argondesign.com/av1-spec/av1-spec.html</a>
   <dt id="biblio-heif">[HEIF]
   <dd><a href="https://www.iso.org/standard/66067.html">Information technology — High efficiency coding and media delivery in heterogeneous environments — Part 12: Image File Format</a>. December 2017. International Standard. URL: <a href="https://www.iso.org/standard/66067.html">https://www.iso.org/standard/66067.html</a>
   <dt id="biblio-isobmff">[ISOBMFF]
   <dd><a href="http://standards.iso.org/ittf/PubliclyAvailableStandards/c068960_ISO_IEC_14496-12_2015.zip">Information technology — Coding of audio-visual objects — Part 12: ISO Base Media File Format</a>. December 2015. International Standard. URL: <a href="http://standards.iso.org/ittf/PubliclyAvailableStandards/c068960_ISO_IEC_14496-12_2015.zip">http://standards.iso.org/ittf/PubliclyAvailableStandards/c068960_ISO_IEC_14496-12_2015.zip</a>
   <dt id="biblio-rfc2119">[RFC2119]
   <dd>S. Bradner. <a href="https://tools.ietf.org/html/rfc2119">Key words for use in RFCs to Indicate Requirement Levels</a>. March 1997. Best Current Practice. URL: <a href="https://tools.ietf.org/html/rfc2119">https://tools.ietf.org/html/rfc2119</a>
  </dl>
  <aside class="dfn-panel" data-for="alpha-image">
   <b><a href="#alpha-image">#alpha-image</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-alpha-image">2.2. Auxiliary Image</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="auxiliary-image">
   <b><a href="#auxiliary-image">#auxiliary-image</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-auxiliary-image">2.1. Alpha Image</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="master-image">
   <b><a href="#master-image">#master-image</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-master-image">2.1. Alpha Image</a>
    <li><a href="#ref-for-master-image①">2.2. Auxiliary Image</a>
    <li><a href="#ref-for-master-image②">2.3. Cover Image</a>
    <li><a href="#ref-for-master-image③">2.4. Image Collection</a>
    <li><a href="#ref-for-master-image④">2.6. Image Sequence</a>
    <li><a href="#ref-for-master-image⑤">2.9. Thumbnail Image</a>
   </ul>
  </aside>
<script>/* script-dfn-panel */

        document.body.addEventListener("click", function(e) {
            var queryAll = function(sel) { return [].slice.call(document.querySelectorAll(sel)); }
            // Find the dfn element or panel, if any, that was clicked on.
            var el = e.target;
            var target;
            var hitALink = false;
            while(el.parentElement) {
                if(el.tagName == "A") {
                    // Clicking on a link in a <dfn> shouldn't summon the panel
                    hitALink = true;
                }
                if(el.classList.contains("dfn-paneled")) {
                    target = "dfn";
                    break;
                }
                if(el.classList.contains("dfn-panel")) {
                    target = "dfn-panel";
                    break;
                }
                el = el.parentElement;
            }
            if(target != "dfn-panel") {
                // Turn off any currently "on" or "activated" panels.
                queryAll(".dfn-panel.on, .dfn-panel.activated").forEach(function(el){
                    el.classList.remove("on");
                    el.classList.remove("activated");
                });
            }
            if(target == "dfn" && !hitALink) {
                // open the panel
                var dfnPanel = document.querySelector(".dfn-panel[data-for='" + el.id + "']");
                if(dfnPanel) {
                    console.log(dfnPanel);
                    dfnPanel.classList.add("on");
                    var rect = el.getBoundingClientRect();
                    dfnPanel.style.left = window.scrollX + rect.right + 5 + "px";
                    dfnPanel.style.top = window.scrollY + rect.top + "px";
                    var panelRect = dfnPanel.getBoundingClientRect();
                    var panelWidth = panelRect.right - panelRect.left;
                    if(panelRect.right > document.body.scrollWidth && (rect.left - (panelWidth + 5)) > 0) {
                        // Reposition, because the panel is overflowing
                        dfnPanel.style.left = window.scrollX + rect.left - (panelWidth + 5) + "px";
                    }
                } else {
                    console.log("Couldn't find .dfn-panel[data-for='" + el.id + "']");
                }
            } else if(target == "dfn-panel") {
                // Switch it to "activated" state, which pins it.
                el.classList.add("activated");
                el.style.left = null;
                el.style.top = null;
            }

        });
        </script>